{% extends "base.html" %}

{% block title %}Home - Volunteer Platform{% endblock %}

{% block content %}
<div class="hero-section">
    <h1>Welcome to Volunteer Platform</h1>
    <p>Connecting volunteers with charitable organizations to create a better world together</p>
    {% if not session.get('user_id') %}
        <div class="cta-buttons">
            <a href="{{ url_for('register') }}" class="btn btn-primary">Register Now</a>
            <a href="{{ url_for('login') }}" class="btn btn-secondary">Login</a>
        </div>
    {% endif %}
</div>

<div class="featured-activities">
    <h2>Featured Activities</h2>
    <div class="activity-grid">
        {% for activity in activities %}
        <div class="activity-card">
            <h3>{{ activity.title }}</h3>
            <p class="activity-time">
                <span>Start: {{ activity.start_time.strftime('%Y-%m-%d %H:%M') }}</span>
                <span>End: {{ activity.end_time.strftime('%Y-%m-%d %H:%M') }}</span>
            </p>
            <p class="activity-location">Location: {{ activity.location }}</p>
            <a href="{{ url_for('activity_detail', activity_id=activity.id) }}" class="btn btn-small">View Details</a>
        </div>
        {% endfor %}
    </div>
</div>

<div class="featured-charities">
    <h2>Featured Organizations</h2>
    <div class="charity-grid">
        {% for charity in charities %}
        <div class="charity-card">
            <h3>{{ charity.name }}</h3>
            <p class="charity-description">{{ charity.description }}</p>
            {% if charity.user_type == 'charity' %}
            <p class="charity-contact">Contact: {{ charity.contact }}</p>
            <p class="charity-phone">Phone: {{ charity.phone }}</p>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %} 